/**
 * 项目考勤记录
 */
import moment from 'moment';
import {
  DatePicker,
  Space,
  Input,
  Select,
  Table,
  Tag,
  Tabs,
  Button,
  Form,
} from 'antd';
import request from '@/http';
import React, { useState } from 'react';
import { history } from '@/.umi/core/history';
import All_style from '../../index.less';
import { Link } from 'react-router-dom';
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;
const columns = [
  {
    /**无 */
    title: '日期',
    dataIndex: 'ar_checkdate',
    key: 'ar_checkdate',
  },
  {
    /*无*/
    title: '学号',
    dataIndex: 'student_id',
    key: 'student_id',
  },
  {
    title: '姓名',
    dataIndex: 'student_name',
    key: 'student_name',
  },
  {
    title: '项目名称',
    dataIndex: 'course_name',
    key: 'course_name',
  },
  {
    title: '实训老师',
    dataIndex: 'teacher_name1',
    key: 'teacher_name',
  },
  {
    title: '责任老师',
    dataIndex: 'teacher_name2',
    key: 'teacher_name',
  },
  {
    title: '考勤情况：',
    dataIndex: 'ar_attendance',
    key: 'ar_attendance',
  },

  {
    title: '应签到',
    dataIndex: 'ar_checkin',
    key: 'ar_checkin',
  },
  {
    title: '实签到',
    dataIndex: 'ar_acheckin',
    key: 'ar_acheckin',
  },
  {
    title: '应签退',
    dataIndex: 'ar_checkout',
    key: 'ar_checkout',
  },
  {
    title: '实签退',
    dataIndex: 'ar_acheckout',
    key: 'ar_acheckout',
  },
  {
    title: '操作',
    key: 'active',
    render: (text, row) => {
      return row.ar_attendance == '请假' ? (
        <>
          <Link
            to={{
              pathname: '/Teacher/AttendanceRecord/edit',
              state: { workId: row.workId },
            }}
          >
            查看详情
          </Link>
        </>
      ) : (
        ''
      );
    },
  },
];

const AttRecord = (props: any) => {
  const [formObject] = Form.useForm();
  const [captchaUrl, setCaptchaUrl] = React.useState('');
  // 项目名称绑定接口
  const [courseName, setCourseName] = React.useState([]);
  const getCourseName = async () => {
    const CourseName: any = await request.put(
      '/user_info_manage/getCourseName',
    );
    // console.log(CourseName.data);
    setCourseName(CourseName.data);
  };
  // 查看考勤情况
  const [type, setType] = React.useState([]);
  const getArAttendance = async () => {
    const type: any = await request.put('/user_info_manage/getArAttendance');
    // console.log(CourseName.data);
    setType(type.data);
  };
  /**
   * 院系下拉框
   */
  const [college, setCollege] = React.useState([]);
  const getCollege = async () => {
    const type: any = await request.put('/user_info_manage/getCollegeName');
    setCollege(type.data);
  };
  /**
   * 专业下拉框
   */
  const [major, setMajor] = React.useState([]);
  const getMajor = async () => {
    const type: any = await request.put('/user_info_manage/getMajorName');
    setMajor(type.data);
  };
  /**
   * 考勤情况
   */
  const [attendance, setAttendance] = React.useState([]);
  const getAttendance = async () => {
    const type: any = await request.put('/user_info_manage/getArAttendance');
    setAttendance(type.data);
  };
  /**
   * 年级
   */
  const [grade, setGrade] = React.useState([]);
  const getGrade = async () => {
    const type: any = await request.put('/user_info_manage/getGradeName');
    setGrade(type.data);
  };
  /**
   * 班级
   */
  const [className, setClassName] = React.useState([]);
  const getClassName = async () => {
    const type: any = await request.put('/user_info_manage/getClassName');
    setClassName(type.data);
  };
  // 条件查询项目考勤记录表绑定接口
  interface pay {
    current: number;
    pageSize: number;
    total: number;
    onChange: any;
  }
  const onCurrentChange = (page, pageSize) => {
    getData(page, pageInfo.pageSize);
  };
  const [pageInfo, setPageInfo] = useState<pay>({
    current: 1,
    pageSize: 4,
    total: 0,
    onChange: onCurrentChange,
  });
  const [data, setData] = React.useState();
  const getData = async (current, pageSize) => {
    const selectForm = await formObject.validateFields(); //获得表单数据
    // 处理日期数据
    const date1 = selectForm?.date
      ? selectForm?.date[0]?.format('YYYY-MM-DD ')
      : '';
    const date2 = selectForm?.date
      ? selectForm?.date[1]?.format('YYYY-MM-DD ')
      : '';
    const result: any = await request.post(
      '/atendance_manage_moude/laoshi/QueryAttendanceRecord',
      {
        page: current,
        number: pageSize,
        arAttendance: selectForm.type,
        bar_checkdate: date1,
        className: selectForm.className,
        collegeName: selectForm.college,
        courseName: selectForm.project_name,
        ear_checkdate: date2,
        gradeName: selectForm.grade,
        majorName: selectForm.majorName,
        studentName: selectForm.studentName,
        studentNo: selectForm.studentNo,
      },
    );
    console.log('项目考勤' + result.data);
    if (result.success) {
      const newData = result.data.returnDate.map((d, index) => {
        return {
          id: d.id,
          key: `k_${index}`,
          ar_checkdate: d.arCheckDate,
          student_id: d.studentNo,
          student_name: d.studentName,
          course_name: d.courseName,
          teacher_name1: d.trainingTeacher,
          teacher_name2: d.responseTeacher,
          ar_attendance: d.arAttendance,
          ar_acheckin: d.arAcheckIn,
          ar_checkin: d.arCheckIn,
          ar_checkout: d.arCheckOut,
          ar_acheckout: d.arAcheckOut,
        };
      });
      setPageInfo({
        current: result?.data?.paginationData?.currentPage,
        pageSize: result?.data?.paginationData?.number,
        total: result?.data?.paginationData?.sum,
        onChange: pageInfo.onChange,
      });
      setData(newData);
    }
  };
  // 重置按钮
  const onReset = () => {
    formObject.resetFields();

    console.log('重置成功');
  };
  React.useEffect(() => {
    getCourseName();
    getArAttendance();
    getData(pageInfo.current, pageInfo.pageSize);
    onReset();
    getCollege();
    getMajor();
    getAttendance();
    getGrade();
    getClassName();
  }, []);
  return (
    <div className={All_style.box}>
      <Form form={formObject}>
        <div>
          <Form.Item
            label="日期"
            name={'date'}
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <RangePicker></RangePicker>
          </Form.Item>
          <Form.Item
            label="项目名称"
            name="project_name"
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {courseName.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="院系"
            name="college"
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {college.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="班级"
            name={'className'}
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {className.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="学号"
            name={'studentNo'}
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {courseName.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="专业"
            name={'majorName'}
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {major.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="考勤情况："
            name="type"
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              mode="multiple"
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {attendance.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="年级"
            name={'grade'}
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
            >
              {grade.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label={'学生姓名'}
            name={'studentName'}
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Input></Input>
          </Form.Item>
          <div style={{ clear: 'both', float: 'right', marginRight: 80 }}>
            <Button
              onClick={() => getData(pageInfo.current, pageInfo.pageSize)}
              htmlType="button"
              className={All_style.button}
            >
              查询
            </Button>
            <Button
              htmlType="button"
              onClick={onReset}
              className={All_style.button2}
            >
              重置
            </Button>
          </div>
        </div>
      </Form>

      <Table
        pagination={pageInfo}
        columns={columns}
        dataSource={data}
        className={All_style.table}
      />
    </div>
  );
};

export default AttRecord;
